<template>
  <el-container class="home-page">
    <!-- 头部区域 -->
    <el-header>
      <div>Null</div>
      <div><router-link to="/hwkeye">Object</router-link></div>
      <div>Function</div>
      <div>String</div>
      <div>Number</div>
    </el-header>
    <el-container>
      <!--  侧边栏区域  :collapse="isCollapse"-->
      <el-aside width="200px">
        <el-menu text-color="#303133" :default-active="$router.currentRoute.path" @open="handleOpen" @close="handleClose">
          <el-submenu :index="item.id + ''" v-for="item in navList" :key="item.id">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{ item.cateName }}</span>
            </template>

            <el-menu-item :key="subnav.id" @click="pushRouter(subnav.enName)" :index="'/' + subnav.enName" v-for="subnav in item.children">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{ subnav.cateName }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!--  右侧内容区域 -->
      <el-main class="home-main">
        <!-- 路由占位符 -->
        <el-card class="home-page-card">
          <!--  el-tags 这个存储的是 tag的标签 -->
          <router-view></router-view>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  // 组件名称
  name: 'HomePage',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      isCollapse: true,
      activePath: '',
      navList: [
        {
          id: 0,
          cateName: 'DEMO',
          enName: 'dashboard',
          children: [
            {
              id: 1,
              cateName: 'SwiperDemo',
              enName: 'swiperDemo'
            },
            {
              id: 2,
              cateName: 'LessDemo',
              enName: 'lessDemo'
            },
            {
              id: 3,
              cateName: 'routerDemo',
              enName: 'routerDemo'
            },
            {
              id: 4,
              cateName: 'dataHijackingDemo',
              enName: 'dataHijacking'
            }
          ]
        },
        {
          id: 10,
          cateName: '网络/浏览器相关',
          enName: 'monitoring',
          children: [
            {
              id: 11,
              cateName: '协商缓存与强制缓存',
              enName: 'cacheDemo'
            },
            {
              id: 12,
              cateName: '组件视图',
              enName: 'cptview'
            },
            {
              id: 13,
              cateName: '浏览器内存',
              enName: 'brom'
            }
          ]
        },
        {
          id: 20,
          cateName: 'elementTest',
          enName: 'elementTest',
          children: [
            {
              id: 21,
              cateName: 'subMentItem',
              enName: 'subMentItem'
            }
          ]
        }
      ]
    }
  },
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    // console.log(this.$route.path)
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    pushRouter(path) {
      if ('/' + path === this.$router.currentRoute.fullPath) return
      this.$router.push({ path })
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath)
    }
  }
}
</script>

<style scoped lang="less">
.home-page {
  height: 100%;
  .el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px unset;
    background-color: skyblue;
    div {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 100%;
      background-color: rgb(230, 134, 134);
      color: #545c64;
    }
  }
  .el-aside {
    background-color: #acc;
  }
  .home-main {
    background-color: #ffa;
    padding: 5px;
    .home-page-card {
      padding: 5px;
      height: 100%;
      width: 100%;
      /deep/ .el-card__body {
        height: 100%;
        width: 100%;
      }
    }
  }
}
</style>
